// Root selector
@alfresco: alfresco-share;

// Main palette
@primary-background-color: #fff;
@primary-font-color: #333;
@header-background-color: #1a1a1a;
@header-font-color: #a6a6a6;
@alternate-background-color: #ccc;
@alternate-font-color: @primary-font-color;

@text-highlight-color: #ffd180;

// Header widget colours
// These are used for the "alfresco/header" packaged widgets which are primarily extensions
// to the "alfresco/menus" widgets. You can override these variables to make theme specific header
// changes
@header-primary-background-color: @header-background-color;
@header-primary-font-color: @header-font-color;
@header-menubar-font-color: #ccc;
@header-dropdown-menu-font-color: #fff;
@header-hover-background-color: #717171;
@header-hover-font-color: #fff;
@header-focus-background-color: #4d4d4d;
@header-focus-font-color: #fff;

// Default/base "theme"
// These are primarily used in the "alfresco/layout/StripedContent" widget. You can
// override these variables to set theme specific header/sub-header colours
@header-stripe-background-color: @header-background-color;
@header-stripe-font-color: @header-font-color;
@sub-header-stripe-background-color: @alternate-background-color;
@sub-header-stripe-font-color: @alternate-font-color;

// This is the colour of the title bar in Share
@shareTitleBG: #fafafa;

// General palette
@primary-title-color: #fff;
@primary-theme-color: #eee;

// Font Sizes
@page-title-font-size: 26px;
@title-font-size: 20px;
@large-font-size: 16px;
@normal-font-size: 13px;
@small-font-size: 12px;
@very-small-font-size: 10px;
@footer-font-size: 8.11px;

// Font families
@standard-font: Open Sans,Arial,Helvetica,sans-serif;
@bold-font: Open Sans Bold, Arial, sans-serif;
@condensed-font: Open Sans Condensed, Arial, sans-serif;

// Font Mixins

// This is the standard font style used throughout the application for regular text
.standard-font {
   color: @general-font-color;
   font-family: @standard-font;
   font-weight: normal;
}

// This is the bold font style - bold, but not necessarily emphasized (see below)
.bold-font {
   color: @general-font-color;
   font-family: @bold-font;
   font-weight: normal;
}

// Emphazied fonts are used to draw the user focus so should be bolder, darker and larger than normal
.emphasized-font {
   color: @emphasized-font-color;
   font-family: @bold-font;
}

// De-emphasized fonts are intended to be less intrusive so should be lighter in colour
.de-emphasized-font {
   color: @de-emphasized-font-color;
   font-family: @standard-font;
}

// Layout settings...
// This is used to control the overall layout of the page. Line-heights will be a multiple of
// this value based on the font-size
@standard-line-height: 10px;
@standard-column-width: 15px;
// This is used when the columns need some breathing space.
@standard-column-spacing: 5px;
// Used for e.g. the facets on the search page.
@sidebar-component-width: 320px;
// Used for dialog label width area
@dialog-label-section: 160px;
@dialog-control-section: 530px;
// The minimum width of a dialog (unless overridden in the request to the DialogService)
@dialog-min-width: 580px;

// Font Colours
@general-font-color: #333;
@emphasized-font-color: #000;
@de-emphasized-font-color: #767676;
@highlighted-font-color: #fff;

@validation-error-font-color: #ed2525;
@validation-warning-font-color: darkorange;

// Link colours and decoration
@link-font-color: @general-font-color;
@link-emphasized-font-color: @emphasized-font-color;
@link-text-decoration: none;
@link-title-text-decoration: @link-text-decoration;
@link-title-font-color: @link-font-color;

// Hovered link colours and decoration
@link-font-color-hover: @link-font-color;
@link-text-decoration-hover: underline;
@link-title-font-color-hover: @link-title-font-color;
@link-title-text-decoration-hover: @link-title-text-decoration;

// When a form field is disabled, this opacity will be applied to it...
@disabled-form-field-opacity: 0.35;

// Borders...
// These have been initially added for form controls...
@standard-border-width: 1px;
@standard-border-style: solid;
@standard-border-color: #d3d3d3;
@standard-border: @standard-border-width @standard-border-style @standard-border-color;
@standard-form-border-color: #ccc;
@standard-form-border: @standard-border-width @standard-border-style @standard-form-border-color;
@standard-border-radius: 6px;
@hover-border-color: #d3d3d3;
@thick-border-width: 3px;
@upload-highlight-border: 3px dashed #6ba969;

// Button (colours)
@button-color-background: #fff;
@button-color-default: #0c79bf;
@button-color-hover: #135fa3;
@button-color-active: #125380;
@button-color-disabled: #b8b8b8;
@primary-call-to-action-default: #47aa42;
@primary-call-to-action-hover: #358032;
@primary-call-to-action-active: #2c6a29;
@legacy-button-color: #ccc;
@legacy-button-color-text: @general-font-color;
@legacy-action-button-color: #8dc63f;

@focused-border-color: @button-color-default;

// Push buttons
@push-button-min-width: 90px;
@push-button-max-width: 200px;
@push-button-margin: 8px;
@push-button-border-radius: 3px;
@push-button-line-height: 32px;
@push-button-background: #fff;
@push-button-border-color: #E4E4E4;
@push-button-text-color: #9D9D9D;

@push-button-background-hover: #fff;
@push-button-border-color-hover: #E4E4E4;
@push-button-text-color-hover: #5F5F5E;

@push-button-background-focus: #86BCDF;
@push-button-border-color-focus: #205679;
@push-button-text-color-focus: #5F5F5E;

@push-button-background-checked: #86BCDF;
@push-button-border-color-checked: #86BCDF;
@push-button-text-color-checked: #5F5F5E;

// The standard button is what is normally seen
@standard-button-background: @button-color-background;
@standard-button-background-focus: @button-color-background;
@standard-button-background-active: @button-color-background;
@standard-button-background-disabled: @button-color-background;
@standard-button-border-width: 1px;
@standard-button-border-style: solid;
@standard-button-border: @standard-button-border-width @standard-button-border-style @button-color-default;
@standard-button-border-focus: @standard-button-border-width @standard-button-border-style @button-color-hover;
@standard-button-border-active: @standard-button-border-width @standard-button-border-style @button-color-active;
@standard-button-border-disabled: @standard-button-border-width @standard-button-border-style @button-color-disabled;
@standard-button-border-radius: 3px;
@standard-button-font-color: @button-color-default;
@standard-button-font-color-focus: @button-color-hover;
@standard-button-font-color-active: @button-color-active;
@standard-button-font-color-disabled: @button-color-disabled;
@standard-button-font-family: @standard-font;
@standard-button-font-size: @normal-font-size;
@standard-button-font-weight: normal;
@standard-button-height: 28px;
@standard-button-line-height: @standard-button-font-size * 1.2;
@standard-button-padding-vertical: (@standard-button-height - (@standard-button-border-width * 2) - @standard-button-line-height * 1.2) / 2;
@standard-button-padding-horizontal: @standard-button-font-size;
@standard-button-padding: 0;
@standard-button-margin: 0 (@standard-column-width * 0.5) 0 (@standard-column-width * 0.5);
@standard-button-text-padding: @standard-button-padding-vertical @standard-button-padding-horizontal;
@standard-button-text-margin: 0;

// "Call-to-action" buttons capture the users attention
@call-to-action-button-background: @button-color-default;
@call-to-action-button-background-focus: @button-color-hover;
@call-to-action-button-background-active: @button-color-active;
@call-to-action-button-background-disabled: @button-color-disabled;
@call-to-action-button-border-width: @standard-border-width;
@call-to-action-button-border-style: solid;
@call-to-action-button-border: @call-to-action-button-border-width @call-to-action-button-border-style @button-color-default;
@call-to-action-button-border-focus: @call-to-action-button-border-width @call-to-action-button-border-style @button-color-hover;
@call-to-action-button-border-active: @call-to-action-button-border-width @call-to-action-button-border-style @button-color-active;
@call-to-action-button-border-disabled: @call-to-action-button-border-width @call-to-action-button-border-style @button-color-disabled;
@call-to-action-button-border-radius: @standard-button-border-radius;
@call-to-action-button-font-color: @button-color-background;
@call-to-action-button-font-color-focus: @button-color-background;
@call-to-action-button-font-color-active: @button-color-background;
@call-to-action-button-font-color-disabled: fade(@button-color-background, 50%);
@call-to-action-button-font-family: @standard-button-font-family;
@call-to-action-button-font-size: @standard-button-font-size;
@call-to-action-button-font-weight: @standard-button-font-weight;
@call-to-action-button-height: @standard-button-height;
@call-to-action-button-line-height: @standard-button-line-height;
@call-to-action-button-padding-vertical: (@call-to-action-button-height - (@call-to-action-button-border-width * 2) - @call-to-action-button-line-height * 1.2) / 2;
@call-to-action-button-padding-horizontal: @standard-button-padding-horizontal;
@call-to-action-button-padding: @standard-button-padding;
@call-to-action-button-margin: @standard-button-margin;
@call-to-action-button-text-padding: @standard-button-text-padding;
@call-to-action-button-text-margin: @standard-button-text-margin;

// "Primary call-to-action" buttons are first among equals
@primary-call-to-action-button-background: @primary-call-to-action-default;
@primary-call-to-action-button-background-focus: @primary-call-to-action-hover;
@primary-call-to-action-button-background-active: @primary-call-to-action-active;
@primary-call-to-action-button-border: @call-to-action-button-border-width @call-to-action-button-border-style @primary-call-to-action-default;
@primary-call-to-action-button-border-focus: @call-to-action-button-border-width @call-to-action-button-border-style @primary-call-to-action-hover;
@primary-call-to-action-button-border-active: @call-to-action-button-border-width @call-to-action-button-border-style @primary-call-to-action-active;

// The radius textbox is a modifier to the standard textbox
@radius-textbox-border-radius: 3px;

// Update the variables for legacy buttons
@use-legacy-buttons: true;
.buttonMixin(@use-legacy-buttons) when (@use-legacy-buttons = true) {
   @standard-button-border: @standard-button-border-width @standard-button-border-style @legacy-button-color;
   @standard-button-border-focus: @standard-button-border-width @standard-button-border-style @legacy-button-color;
   @standard-button-border-active: @standard-button-border-width @standard-button-border-style @legacy-button-color;
   @standard-button-border-disabled: @standard-button-border-width @standard-button-border-style @legacy-button-color;
   @standard-button-border-radius: 0;
   @standard-button-font-color: @legacy-button-color-text;
   @standard-button-font-color-focus: @legacy-button-color-text;
   @standard-button-font-color-active: @legacy-button-color-text;
   @standard-button-font-color-disabled: fade(@legacy-button-color-text, 40%);
   @call-to-action-button-background: @legacy-action-button-color;
   @call-to-action-button-background-focus: @legacy-action-button-color;
   @call-to-action-button-background-active: @legacy-action-button-color;
   @call-to-action-button-background-disabled: @legacy-action-button-color;

   @focused-border-color: #8dc63f;
}

// Shadows
@standard-box-shadow: .33px 2px 8px rgba(0, 0, 0, .3);
@inset-box-shadow: 1px 1px 3px #ccc inset;
@selection-box-shadow: 0px 0px 25px 5px #fa0;

// Thumbnails
@thumbnail-width: 100px;
@thumbnail-height: 100px;
@thumbnail-margin: 5px;
@thumbnail-border-width: 0;
@thumbnail-border-style: @standard-border-style;
@thumbnail-border-color: @standard-border-color;
@thumbnail-box-shadow: @standard-box-shadow;

// Dashlets
@dashlet-background: @primary-background-color;
@dashlet-border: @standard-border;
@dashlet-border-radius: @standard-border-radius @standard-border-radius 0 0; // This gives rounding at the top of the dashlet only
@dashlet-title-background: @alternate-background-color;
@dashlet-title-border-bottom: @standard-border;
@dashlet-title-border-radius: @standard-border-radius @standard-border-radius 0 0; // This gives rounding at the top of the dashlet only
@dashlet-title-color: @alternate-font-color;
@dashlet-toolbar-background: transparent;
@dashlet-toolbar-border-bottom: @standard-border;
@dashlet-body-background: @primary-background-color;
@dashlet-body-border-radius: 0; // This gives rounding at the top of the dashlet only

// Layout containers
@sidebar-container-sidebar-background-color: @primary-background-color;
@sidebar-container-main-background-color: @primary-background-color;
@sidebar-container-resize-handle-background-color: @primary-background-color;
@sidebar-container-resize-handle-background-color-active: @primary-background-color;
@sidebar-container-borders: @standard-border;

// Notifications
@notification-background: #666;
@notification-foreground: @highlighted-font-color;
@notification-foreground-dimmed: @de-emphasized-font-color;
@notification-width: 400px;
@notification-border-radius: 0 0 5px 5px;

// Warnings
@warning-border: @standard-border;
@warning-background: #f4f4f4;
@warning-font-color: @emphasized-font-color;
@warning-font-size: @normal-font-size;

// Lists
@list-header-border-color: #e5e5e5;
@list-header-background-color: #f5f5f5;
@list-background-color: #fff;
@list-hover-color: #eee;
@list-focus-color: #ddd;
@list-zebra-color-odd: #fff;
@list-zebra-color-even: #f8f8f8;
@list-border-color: #e5e5e5;
@list-dnd-hover-outline: 2px solid #0082ca;
@list-loading-message-background: rgba(255,255,255,.8);
@list-loading-message-border: 1px solid #666;
@list-loading-message-border-radius: 5px;
@list-loading-message-line-height: 30px;
@list-loading-message-padding: 0 15px;
@list-loading-message-transition: opacity .3s ease;
@list-loading-message-top: 40%;
@list-loading-message-left: 40%;
@list-rendering-message-left: 30%;
@list-loading-overlay-background: rgba(0, 0, 0, .03);
@list-loading-overlay-transition: all 0;

@list-filter-summary-label-width: 100px;

// Tabs
@tab-border: @standard-form-border;
@tab-color: #d8d8d8;
@tab-background: @tab-color none;
@tab-color-active: #fff;
@tab-border-radius: 2px 2px 0 0;
@tab-opacity-disabled: .5;
@tab-padding: 10px;

// Breadcrumbs
@breadcrumb-font-color: @general-font-color;
@breadcrumb-background-color: white;
@breadcrumb-border-color: @standard-border-color;
@breadcrumb-hover-color: #eee;

// Sticky panel
@sticky-panel-max-height: 85vh;
@sticky-panel-background: #fff;
@sticky-panel-border: 1px solid #07c;
@sticky-panel-border-radius: 3px 3px 0 0;
@sticky-panel-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
@sticky-panel-title-background: #07c;
@sticky-panel-title-foreground: #fff;
@sticky-panel-title-line-height: 28px;
@sticky-panel-title-padding: 0 70px 0 10px;
@sticky-panel-title-font-size: 13px;
@sticky-panel-buttons-font-size: 20px;
@sticky-panel-button-close-right: 10px;
@sticky-panel-button-close-top: 0;
@sticky-panel-button-restore-right: 35px;
@sticky-panel-button-restore-top: -5px;
@sticky-panel-button-minimise-right: 35px;
@sticky-panel-button-minimise-top: 2px;
@sticky-panel-minimised-opacity: .8;

// Upload monitor
@upload-monitor-item-line-height: 32px;
@upload-monitor-item-separator-border: 1px solid #ccc;
@upload-monitor-item-padding-left: 10px;
@upload-monitor-item-padding-right: 10px;
@upload-monitor-error-message-color: #c00;
@upload-monitor-error-message-line-height: 18px;
@upload-monitor-error-message-top: -7px;
@upload-monitor-progress-column-width: 50px;
@upload-monitor-status-column-width: 150px;
@upload-monitor-status-color-inprogress: #ccc;
@upload-monitor-status-color-finishing: #ccc;
@upload-monitor-status-color-successful: #090;
@upload-monitor-status-color-unsuccessful: #c00;
@upload-monitor-progress-bar-height: 2px;
@upload-monitor-progress-bar-background: #6bf;
@upload-monitor-progress-bar-box-shadow: 0 0 2px 1px #dff;
@upload-monitor-progress-bar-finishing-background: #0b0;

// Filters
@filter-hover-color: @list-hover-color;

// Previews
@preview-background-color: #424242;

// Drag and drop
@dnd-border-width: 1px;
@dnd-selected-border-width: 4px;
@dnd-selected-border-colour: green;
@dnd-selected-border-style: solid;
@dnd-selected-border: @dnd-selected-border-width @dnd-selected-border-style @dnd-selected-border-colour;
@dnd-focused-border-width: 4px;
@dnd-focused-border-colour: orange;
@dnd-focused-border-style: solid;
@dnd-focused-border: @dnd-focused-border-width @dnd-focused-border-style @dnd-focused-border-colour;

@dnd-item-width: 150px;
@dnd-item-title-width: 90px;
@dnd-item-margin: 5px;
@dnd-item-padding: 5px;
@dnd-item-hover-background: #eee;

@dnd-palette-margin: 5px;
@dnd-palette-padding: 5px;

// UploadContainer backgrounds
@upload-highlight-opacity: 0.2;
@upload-highlight-overlay-opacity: 1;
@upload-highlight-overlay-background: rgba(255, 255, 255, 0);

// Generic colours for displaying collections of items
@collectionColour1: #f1e695;
@collectionColour2: #f4af72;
@collectionColour3: #db645a;
@collectionColour4: #8d4747;
@collectionColour5: #ebb646;
@collectionColour6: #90c654;
@collectionColour7: #999;
@collectionColour8: #cdcccc;
@collectionColour9: #48aa9f;
@collectionColour10: #3860ad;
@collectionColour11: #cc872a;
@collectionColour12: #784423;
@collectionColour13: #8fa9d8;
@collectionColour14: #da533d;
@collectionColour15: #8c624c;
@collectionColour16: #1c8849;
@collectionColour17: #c15f30;
@collectionColour18: #847b47;
@collectionColour19: #945270;
@collectionColour20: #ada835;
@collectionColour21: #598e75;

// Charting item colours
@chartItemColour1: @collectionColour1;
@chartItemColour2: @collectionColour2;
@chartItemColour3: @collectionColour3;
@chartItemColour4: @collectionColour4;
@chartItemColour5: @collectionColour5;
@chartItemColour6: @collectionColour6;
@chartItemColour7: @collectionColour7;
@chartItemColour8: @collectionColour8;
@chartItemColour9: @collectionColour9;
@chartItemColour10: @collectionColour10;
@chartItemColour11: @collectionColour11;
@chartItemColour12: @collectionColour12;
@chartItemColour13: @collectionColour13;
@chartItemColour14: @collectionColour14;
@chartItemColour15: @collectionColour15;
@chartItemColour16: @collectionColour16;
@chartItemColour17: @collectionColour17;
@chartItemColour18: @collectionColour18;
@chartItemColour19: @collectionColour19;
@chartItemColour20: @collectionColour20;
@chartItemColour21: @collectionColour21;
